<template>
  <div>
      <el-card>
        <div slot="header">
          <el-row :gutter="10">
            <el-col :span="6">基本信息</el-col>
            <el-col :span="2" :offset="16"><el-button type="primary">保存</el-button></el-col>
          </el-row>
        </div>

        <el-form
          class="udForm"
          ref="form"
          :model="currentItem"
          label-width="6rem"
        >
          <el-form-item label="区域选择">
              <el-cascader
                @change="mchoose"
                v-model="currentItem.region"
                :options="regions"
               
              ></el-cascader>
          </el-form-item>
          <el-form-item label="开始摇号">
            <el-date-picker
              v-model="currentItem.startDrawDateTiem"
              type="datetime"
              placeholder="datetime"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="结束摇号">
            <el-date-picker
              v-model="currentItem.endDrawDateTiem"
              type="datetime"
              placeholder="datetime"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="开始选车位">
            <el-date-picker
              v-model="currentItem.startChooseDateTime"
              type="datetime"
              placeholder="datetime"
            ></el-date-picker>
          </el-form-item>
        </el-form>
      </el-card>
      <el-card>
        <div slot="header">车位选择</div>
        <div class="choose-tags">
    
          <span class="hh">

             <el-transfer
          class="choose-field-content"
           :titles="['该区可选', '该区已选中']"
            v-model="choosedParkingSpacList"
            :data="transferData">
          </el-transfer>
          </span>
             
        

             
          
         
        
        </div>
      </el-card>

    
  </div>
</template>
<script>
const compareArray = function(arr1,arr2){
  if(arr1.length!=arr2.length) return false
  for(let i = 0;i<arr1.length;i++){
    if(arr1[i] != arr2[i]) return false
  }
  return true
}
export default {
  methods:{
    mchoose(value){
      for(let i of this.chooseItems){
        console.log(i)
        if(compareArray(this.currentItem.region,i.label)){
          this.choosedItem = i.parking_space
        }
      }
    }
  },
  computed:{
    transferData(){
      let res = []
      for(let i of this.choosedItem){
        let obj = {
          key:i.code,
          label:i.code,
          disabled:i.state=='saled'
        }
        res.push(obj)
      }
      return res;
    }
    
    // chooseItems(){
    //   let p = 0;
    //   for(let i of this.regions){
    //     if(i.label == this.currentItem.region[p]){
    //       if(i.children){
    //         p++;
    //         for(let j of i.children){
    //           if(j.label)
    //         }
    //       }else{
    //         return 
    //       }
          
    //     }
    //   }
    // }
  },
  data(){
    return{
      choosedParkingSpacList:[],
      chooseItems:[
        {
          label:['北','A'],
          parking_space:[
                {
                  code: "A001",
                  state: "saled",
                },
                {
                  code: "A002",
                  state: "selected",
                },
                {
                  code: "A003",
                  state: "empty",
                },
               ],
        },
        {
          label:['北','B'],
          parking_space:[ {
                  code: "A004",
                  state: "saled",
                },
                {
                  code: "A005",
                  state: "selected",
                },
                {
                  code: "A006",
                  state: "empty",
                },
                {
                  code: "A007",
                  state: "saled",
                },
                ]
        }
      ],
      choosedItem:[
                {
                  code: "A001",
                  state: "saled",
                },
                {
                  code: "A002",
                  state: "selected",
                },
                {
                  code: "A003",
                  state: "empty",
                },
                {
                  code: "A004",
                  state: "saled",
                },
                {
                  code: "A005",
                  state: "selected",
                },
                {
                  code: "A006",
                  state: "empty",
                },
                {
                  code: "A007",
                  state: "saled",
                },
                {
                  code: "A008",
                  state: "selected",
                },
                {
                  code: "A009",
                  state: "empty",
                },
                {
                  code: "A010",
                  state: "saled",
                },
                {
                  code: "A011",
                  state: "selected",
                },
                {
                  code: "A012",
                  state: "empty",
                },
              ],
      regions:[
        {
          label:"北",
          value:"北",
          children:[{
            label:"A",
            value:"A",
          },{
            label:"B",
            value:"B",
          },{
            label:"C",
            value:"C",
          },]
        },
        {
          label:"南",
          value:"南",
          children:[{
            label:"A",
            value:"A",
          },{
            label:"B",
            value:"B",
          },{
            label:"C",
            value:"C",
          },]
        },


      ],
      currentItem:{
        region:["北",'A'],
        startDrawDateTiem:"请选择日期",
        endDrawDateTiem:"请选择日期",
      }
    }
  }
}
</script>

<style scoped>
.el-card{
  margin-top: 2rem;
}
.choose-tags{
  display: flex;
  justify-content: center;
}
.hh{
  display: inline-block;

  margin: auto;
}
  .choose-tags>>> .el-transfer-panel {

     min-width: 300px;
   }
  
</style>